.post {
  margin: 1rem auto;
  display: flex;
  justify-content: center;

  .panel {
    width: 65%;
    margin-right: 1rem;
    @media screen and (max-width: 900px) {
      width: 98%;
      margin-right: 0;
    }
    .panel-top {
      width: 100%;
      background-color: white;
      border-radius: 0.3rem;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      .title {
        font-size: 1.3rem;
        font-weight: 700;
        padding: 1rem 0 0 1rem;
      }

      .changes {
        font-size: 0.8rem;
        color: #838383;
        margin: 0.5rem 0;
        padding: 0 1rem;
        a {
          text-decoration: none;
          color: #838383;
          &:hover {
            text-decoration: underline rgb(131, 131, 131);
          }
        }
        span:before {
          content: " • ";
        }
      }

      .content {
        border-top: 1px solid #e5e5e5;
        padding: 0.1rem 1.2rem;
        font-size: 15px;
        a {
          text-decoration: none;
          color: #08c;
        }

        img {
          max-width: 100%;
        }

        code {
          white-space: normal;
        }
      }
    }

    .panel-bottom {
      margin-top: 1rem;
      background-color: white;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      .reply-header {
        background-color: #f6f6f6;
        color: #444;
        font-size: 0.9rem;
        padding: 0.6rem;
      }

      .reply {
        border-top: 1px solid #e5e5e5;
        .reply-author {
          padding: 0.6rem;
          display: flex;
          align-items: center;
          color: #666;
          font-size: 0.8rem;

          img {
            width: 30px;
            height: 30px;
            margin-right: 0.8rem;
          }

          a {
            text-decoration: none;
            color: #08c;
          }
        }

        .reply-content {
          margin: -1rem 0 1rem 2rem;
          font-size: 15px;
          a {
            text-decoration: none;
            color: #08c;
          }
          img {
            max-width: 95%;
          }
        }
      }
    }
  }

  .sidebar {
    @media screen and (max-width: 900px) {
      display: none;
    }
    width: 23%;
    height: 100%;

    .panel {
      width: 100%;
      .panel-top {
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        header {
          background-color: #f6f6f6;
          color: #51585c;
          padding: 0.6rem;
          font-size: 0.8rem;
        }
        .info {
          padding: 0.5rem;
          a {
            text-decoration: none;
            color: #778087;
            display: flex;
            align-items: center;
            img {
              height: 48px;
              width: 48px;
              margin-right: 1rem;
            }
          }
        }
        .score,
        .register-time {
          padding: 0.3rem;
          font-size: 0.9rem;
        }
      }

      .panel-bottom {
        margin-top: 1rem;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        header {
          background-color: #f6f6f6;
          color: #51585c;
          padding: 0.6rem;
          font-size: 0.8rem;
        }
        .list {
          padding: 1rem 0.5rem;
          .item {
            font-size: 0.9rem;
            margin-bottom: 0.4rem;
            white-space: nowrap;
            overflow: hidden;
            color: #778087;
            text-overflow: ellipsis;
            a {
              color: #778087;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}
